<!DOCTYPE html>
<html lang="en">
<head>

    <% include head.ejs %>

    <link rel="stylesheet" href="/form/css/formValidation.css"/>
    <link rel="stylesheet" href="/css/summernote.css"/>
</head>
<style>

    h2 {
        color: #428bca;
        text-align: center;
    }

    .edit-wrap {
        padding: 20px;
    }

    .edit-wrap > div {
        background-color: #ffffff;
    }

    .download {
        margin: 10px 0;
        text-align: center;
        font-size: 20px;
    }
</style>

<body>

<section id="container">
    <!--header start-->
    <% include header.ejs %>
    <!--header end-->

    <!--sidebar start-->
    <% include sidebar.ejs %>
    <!--sidebar end-->

    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <h3><i class="fa fa-angle-right"></i> 编辑产品</h3>

            <!-- BASIC FORM ELELEMNTS -->
            <div class="row mt">
                <div class="col-lg-12">
                    <div class="form-panel">
                        <h4 class="mb"><i class="fa fa-angle-right"></i> 产品详情</h4>
                        <form class="form-horizontal style-form" method="get">
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">产品名称</label>
                                <div class="col-sm-10">
                                    <input type="text" id="name" name="name" class="form-control round-form">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">产品描述</label>
                                <div class="col-sm-10">
                                    <input type="text" id="abstract" name="abstract" class="form-control round-form">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">产品分类</label>
                                <div class="col-sm-10">
                                    <select id="category" name="category" class="form-control">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">产品说明</label>
                                <div class="col-sm-10">
                                    <div id="instruction">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">详细参数</label>
                                <div class="col-sm-10">
                                    <div id="detail">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">产品应用</label>
                                <div class="col-sm-10">
                                    <div id="apply">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">产品图片</label>
                                <div class="col-sm-10">
                                    <div class="product-edit-img">
                                        <img id="product-img" src="/images/upload.png" height="180"  alt="上传产品图片">
                                        <input id="file" type="file" style="display: none" />
                                        <input type="hidden" id="pic" name="pic"/>
                                    </div>

                                </div>
                            </div>

                        </form>
                    </div>
                </div><!-- col-lg-12-->
            </div><!-- /row -->

        </section><! --/wrapper -->
    </section><!-- /MAIN CONTENT -->

    <!--main content end-->
    <!--footer start-->
    <% include site-footer.ejs%>
    <!--footer end-->
</section>

<% include basejs.ejs %>

<!--表单验证插件-->
<script type="text/javascript" src="/form/js/formValidation.js"></script>
<script type="text/javascript" src="/form/js/framework/bootstrap.js"></script>
<script type="text/javascript" src="/form/js/language/zh_CN.js"></script>

<script src="/js/vendor/summernote.min.js"></script>
<script src="/js/vendor/summernote-zh-CN.js"></script>
<script src="/js/model/Category.js"></script>
<script src="/js/model/Product.js"></script>
<script>
    $(function () {
        var contentHtml;

        var product = new Product();

        var type = 'product';
        Category.getList(type, getListSuccess, getListError);

        function getListSuccess(data){

            var categoryHtml = '';
            var list = data.category;

            list.forEach(function (category) {
                categoryHtml += '<option value="'+ category.name +'">'+ category.name +'</option>';
            });

            $('#category').html(categoryHtml);

        }
        function getListError(){

        }

        $('#product-img').on('click', function () {
            $('#file').click();
        });
        $('#file').on('change', function () {

            var file    = $(this)[0].files[0];
            var reader  = new FileReader();

            reader.onloadend = function () {
                $('#product-img').attr('src', reader.result);
            }

            if (file) {
                if(!/image\/\w+/.test(file.type)){
                    alert('文件类型应该为图片');
                    return false;
                }
                reader.readAsDataURL(file);
            } else {
                $('#product-img').attr('src', '/images/upload.png');
            }
        })

        $( '#instruction' ).summernote({
            height: 200,
            minHeight: null,
            maxWidth: null,
            focus: true,
            lang: 'zh-CN'
        });
        $( '#detail' ).summernote({
            height: 200,
            minHeight: null,
            maxWidth: null,
            focus: true,
            lang: 'zh-CN'
        });
        $( '#apply' ).summernote({
            height: 200,
            minHeight: null,
            maxWidth: null,
            focus: true,
            lang: 'zh-CN'
        });

        $('#form-article')
                .formValidation({
                    message: '未通过验证',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        title: {
                            message: '标题无效',
                            validators: {
                                notEmpty: {
                                    message: '不能为空'
                                },
                                stringLength: {
                                    min: 1,
                                    max: 30,
                                    message: '长度仅能为1-30'
                                },
                                regexp: {
                                    regexp: /^[A-Za-z0-9\u4e00-\u9fa5_]+$/,
                                    message: '含有特殊字符'
                                }
                            }
                        },
                        abstract: {
                            message: '备注无效',
                            validators: {
                                notEmpty: {
                                    message: '不能为空'
                                }
                            }
                        }
                    }
                })
                .on('success.form.fv', function (e) {
                    // Prevent form submission
                    e.preventDefault();


                });
    });
</script>

</body>
</html>
